<style>
    .banners{display: flex;justify-content: center;align-items: center;}
    .pics_wrap .font-box{width:calc(100% - 140px);height:calc(100% - 100px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
    .pics_wrap .font-box .container{height:100%;display:flex;justify-content:center;align-items:center;}
    .pics_wrap .font-box .font1{font-weight:bold;line-height:1.6;font-size:30px;color:#fff;}
    .pics_wrap .font-box .font2{font-size: 20px;font-family: tahoma;text-transform: uppercase;color:rgb(10, 24, 89);}
    @media(max-width:992px){
        .pics_wrap .font-box .font1{font-size:35px;}
        .pics_wrap .font-box .font2{font-size: 20px;}
    }
    @media(max-width:468px){
        .pics_wrap .font-box{width:100%;padding-left:10px;}
        .pics_wrap img{min-height:100px;width:auto;max-width:160%;}
        .pics_wrap .font-box .font1{font-size:20px;}
        .pics_wrap .font-box .font2{font-size: 12px;}
        .pics_wrap .html5zoo-nav-0{display:none!important;}
    }
</style>
<div class="banners">
    <div class="pics_wrap position-relative overflow-hidden">
        <div id="html5zoo-1">
            <ul class="html5zoo-slides">
                <li>
                    <img src="{{asset('images/about_banner_1.png')}}" />
                </li>
                <li>
                    <img src="{{asset('images/about_banner_2.png')}}" />
                </li>
            </ul>
        </div>
        <div class="position-absolute font-box">
            <div class="container position-relative">
                <div class="position-absolute inner text-left text-white wow slideInUp" data-aos="fade-right">
                    <div class="font1 wow slideInUp">
                        责任 · 激情 · 创新
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{{asset('js/html5zoo.js')}}"></script>
<script src="{{asset('js/lovelygallery.js')}}"></script>
